<template>
  <div>
    <div>
      <el-form :model="paramsFormData" :rules="rules" ref="paramsFormData">
        <el-form-item v-for="(value,key) in paramsFormData" :prop="key" :key="key" :label="paramsFormDataName[key]">
          <div v-if="form_list[key].datatype== 'Integer'">
          <span>
            <el-input v-model.number="paramsFormData[key]" :placeholder="'请输入'+paramsFormDataDescribe[key]"></el-input>
          </span>
          </div>
          <div v-else>
            <el-input ref="formInput" v-model="paramsFormData[key]"
                      :placeholder="'请输入'+paramsFormDataDescribe[key]"></el-input>
            <span style="float:right;" id="icon">
              <a @click="openFilePosition" v-if="form_list[key].name.indexOf('选择数据')!==-1">
                <n3-icon type="folder-open" size="large"></n3-icon>
              </a>
              <a @click="openPosition" v-if="form_list[key].name.indexOf('空间范围')!==-1">
                <n3-icon type="map-marker" size="large" style="margin-left:-80%"></n3-icon>
              </a>
              <a @click="openPosition" v-if="form_list[key].name.indexOf('时间范围')!==-1">
                <n3-icon type="calendar" size="large" style="margin-left:-20%"></n3-icon>
              </a>
              <a v-if="form_list[key].name.indexOf('数据字段')!==-1" class="output">
                <n3-icon type="folder-open-o" size="large"></n3-icon>
              </a>
            </span>
          </div>
        </el-form-item>
        <span id="watch">
          <el-button type="success" @click="submit">提交</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
      </span>
      </el-form>
    </div>
    <div>
    </div>
  </div>
</template>


<script>
  import Vue from 'vue';

  export default {
    name: "modelForm",
    data() {
      return {
        paramsFormData: {},
        paramsFormDataName: {},
        paramsFormDataDescribe: {},
        rules: {},
      }
    },
    components: {},
    props: {
      form_list: Array,
      artifactId: String,
      dialogVisible: Object,
    },
    methods: {
      openPosition() {
        this.$Bus.$emit('positionVisible.v', true);
      },
      openFilePosition(e) {
        let that = this;
        this.$Bus.$emit('fileVisible.v', true);
        let string = $(e.target).parent().parent().siblings()[0].innerHTML;
        let matchStr=string.match(/请输入(\S*)"/)[1];
        this.$Bus.$on('fileData',(filePramas)=>{
          for(let i=0;i<=that.form_list.length;i++){
            if(that.form_list[i].description.indexOf(matchStr)!==-1){
              that.paramsFormData[i]=filePramas;
              break;
            }
          }
        });
      },
      outFileChange(e) {
        let outFileString = $(e.target).parent().parent().siblings()[0].innerHTML;
        let outMatchStr=outFileString.match(/请输入(\S*)"/)[1];
        console.log(outMatchStr)
        if (e.target.files.length > 0){
          for(let i=0;i<=this.form_list.length;i++){
            if(this.form_list[i].description.indexOf(outMatchStr)!==-1){
              this.paramsFormData[i]=e.target.files[0].name;
              break;
            }
          }
        }
      },
      reset() {
        this.$refs["paramsFormData"].resetFields();
      },
      submit() {
        let obj = this;
        this.$refs["paramsFormData"].validate((valid) => {
          if (valid) {
            let modelparamData = {};
            // modelparamData.user = "ubt";
            let para = [];
            for (let i = 0; i < Object.keys(obj.paramsFormData).length - 1; i++) {
              para.push(obj.paramsFormData["" + (i + 1)])
            }
            modelparamData.params = para;
            modelparamData.customname = this.paramsFormData["0"];
            // console.log(modelparamData.customname = this.paramsFormData["0"]);
            this.$axios.post(
              // url: 'http://192.168.240.25:3000/dldsj/parallel/use/' + this.artifactId,
              '/parallel/use/' + this.artifactId, modelparamData
            ).then(function (response) {
              if (response.code === 200) {
                obj.$message({
                  type: 'success',
                  message: '模型提交成功!请前往模型项目查看运行进度！'
                });
              }
            }).catch(function (error) {
              obj.$message.error('模型提交失败!');
            });
            let visible = this.dialogVisible;
            visible.v = false;
            this.$emit("update:dialogVisible", visible)
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
    },
    watch: {
      form_list: {
        handler: function (newValue, oldValue) {
          this.paramsFormData = {};
          this.paramsFormDataName = {};
          this.paramsFormDataDescribe = {};
          this.rules = {};
          for (let i = 0; i < newValue.length; i++) {
            let param = i;
            Vue.set(this.paramsFormData, param, "");
            this.paramsFormDataName[param] = newValue[i].name;
            this.paramsFormDataDescribe[param] = newValue[i].description;
            // console.log(newValue[i].name)
            this.rules[param] = [];
            let ruleMessage = {};
            let ruleRequire = {};
            if (newValue[i].datatype === 'Integer') {
              ruleRequire["type"] = 'number';
              ruleRequire["message"] = '参数必须为整数值';
              ruleMessage["required"] = true;
            } else if (newValue[i].name.indexOf('范围') !== -1||newValue[i].name.indexOf('属性') !== -1) {
              ruleMessage["required"] = false;
            } else {
              ruleRequire["type"] = '';
              ruleRequire["message"] = '';
              ruleMessage["required"] = true;
            }
            ruleMessage["message"] = '请输入' + newValue[i].name;
            ruleMessage["trigger"] = 'blur';
            ruleRequire["trigger"] = 'blur';
            this.rules[param][0] = ruleMessage;
            this.rules[param][1] = ruleRequire;
          }
        }
      }
    },
    mounted() {
      let that = this;
      this.$Bus.$on('coordinate', (params) => {
        console.log(params);
        // that.$refs.formInput[1].value = params;
        that.paramsFormData[1] = params;
      });
    },
    created(){
    }
  }
</script>

<style>
  .el-input {
    width: 95%;
  }

  #icon:hover {
    color: #409EFF;
  }

  .output input {
    font-size: 0;
    position: absolute;
    left: -999px;
  }

  .output label {
    left: 0;
    /*height: 30px;*/
    /*width: 30px;*/

  }
</style>
